<script src="whenReady.js"></script>
<script>
    whenReady(function () {
        var clock = document.getElementById("clock");  // The clock element
        var icon = new Image();                        // An image to drag
        icon.src = "clock-icon.png";                   // Image URL

        // Display the time once every minute
        function displayTime() {
            var now = new Date();               // Get current time
            var hrs = now.getHours(), mins = now.getMinutes();
            if (mins < 10) mins = "0" + mins;
            clock.innerHTML = hrs + ":" + mins; // Display current time
            setTimeout(displayTime, 60000);     // Run again in 1 minute
        }

        displayTime();

        // Make the clock draggable
        // We can also do this with an HTML attribute: <span draggable="true">...
        clock.draggable = true;

        // Set up drag event handlers
        clock.ondragstart = function (event) {
            var event = event || window.event; // For IE compatability

            // The dataTransfer property is key to the drag-and-drop API
            var dt = event.dataTransfer;

            // Tell the browser what is being dragged.
            // The Date() constructor used as a function returns a timestamp string
            dt.setData("Text", Date() + "\n");

            // Tell the browser to drag our icon to represent the timestamp, in
            // browsers that support that. Without this line, the browser may
            // use an image of the clock text as the value to drag.
            if (dt.setDragImage) dt.setDragImage(icon, 0, 0);
        };
    });
</script>
<style>
    #clock { /* Make the clock look nice */
        font: bold 24pt sans;
        background: #ddf;
        padding: 10px;
        border: solid black 2px;
        border-radius: 10px;
    }
</style>
<h1>Drag timestamps from the clock</h1>
<span id="clock"></span>  <!-- The time is displayed here -->
<textarea cols=60 rows=20></textarea> <!-- You can drop timestamps here -->
